<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="detail-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="计划编号：">
                        {{ form.shipPlanNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：" prop="shipName">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：" prop="voyage">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划类型：" prop="planType">
                        {{ form.planType | _filterShipPlanType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态：" prop="planStatus">
                        {{ form.planStatus | _filterShipPlanStatus }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="完成日期：">
                        {{ form.taskTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="数据来源：">
                        {{ form.planFrom }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间：">
                        {{ form.createDateTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="封航日期：">
                        {{ form.feeCloseTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航时间：">
                        {{ form.closeTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航人：">
                        {{ form.closeUser }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="border-line-dashed mt-10 mb-10"></div>
        <el-tabs v-model="activeName" @tab-click="handleTab">
            <el-tab-pane label="汇总报告" name="first"></el-tab-pane>
            <el-tab-pane label="明细报告" name="second"></el-tab-pane>
            <el-tab-pane label="残损报告" name="third"></el-tab-pane>
            <!--<el-tab-pane label="港装箱报告" name="fourth"></el-tab-pane>-->
            <!--<el-tab-pane label="积载图" name="five"></el-tab-pane>-->
        </el-tabs>
        <total :un="false" v-if="activeName==='first'" :status="form.planStatus" ref="first"  fromPage="xc"></total>
        <detail :type="form.planType==='ZC'" v-if="activeName==='second'" :status="form.planStatus" ref="second"></detail>
        <damaged v-if="activeName==='third'" ref="third"></damaged>
        <!--<port v-if="activeName==='fourth'" ref="fourth"></port>-->
        <!--<stowage v-if="activeName==='five'" ref="five"></stowage>-->
    </div>
</template>

<script>
    import {
        getShipPlanId,
        getShipPlanIdList,
        getShipPlanList,
    } from "@/api/shipPlan/shipPlan";
    import total from './report/total'
    import detail from './report/detail'
    import port from './report/port'
    import damaged from './report/damaged'
    import stowage from './report/stowage'

    export default {
        name: "卸船理箱报告",
        components: { total, detail, port, damaged, stowage },
        data() {
            return {
                id: '',
                form: {},
                rules: {},
                condition: {},
                list: [],
                activeName: 'first',
                dialogForm: false,
            }
        },
        mounted() {
            this.getData()
        },
        activated() {
            if (!this.created) {
                this.getData()
            }
        },
        methods: {
            loadData() {
                getShipPlanId(this.id).then(res => {
                    this.created = false
                    this.form = res.data
                    localStorage.setItem('fDatas',JSON.stringify(this.form))
                    this.$nextTick(() => {
                        this.$refs[this.activeName].id = this.id
                        this.$refs[this.activeName].loadData()
                    })
                    if(sessionStorage.getItem('ContainerId')) {
                        this.$nextTick(() => {
                            this.activeName = 'second'
                        })
                    }else{
                        this.$nextTick(() => {
                            this.activeName = 'first'
                        })    
                    }
                })
            },
            getData() {
                this.id = sessionStorage.getItem('unReportId')
                if (this.id) {
                    this.loadData()
                } else {
                    const view = { path: `/work/shipPlan/unReport`, name: '卸船理箱报告' }
                    this.$store.dispatch('delVisitedViews', view).then((views) => {
                        if (view.path === this.$route.path) {
                            const latestView = views.slice(-1)[0]
                            if (latestView) {
                                this.$router.push(latestView.path)
                            } else {
                                this.$router.push({ path: '/work/shipPlan/unload', name: '卸船计划列表' })
                            }
                        } else {
                            this.$message({ message: '服务器错误!', type: 'error' })
                        }
                    })
                }
            },
            handleTab(tab, event) {
                console.log(tab, event)
                this.$nextTick(() => {
                    this.$refs[tab.name].id = this.id
                    this.$refs[tab.name].loadData()
                })
            }
        }
    }
</script>

<style scoped>

</style>
